<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.one {
				background-color: aquamarine;
			}

			.two {
				background-color: #30665a;
				color: #FFF;
			}
			
			.three {
				border: solid 1px red;;
			}
		</style>
	</head>
	<body>

		<!-- 视图 -->
		<div id="app">

			<p v-bind:title="title1">段落信息1 </p>

			<p :title="title1" :style="dynamicStytle">段落信息2</p>

			<p  :class="cls">段落信息3</p>


			<!-- one  和  two 的key 代表的是 样式名字，   对应的value是一个boolean类型，true 或者是false ， 如果为true 则改样式生效  -->
			<p  :class="{'one':oneActive,'two':twoActive, 'three':activeThree}">段落信息4 </p>
			
			
			
			
			
				

		</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					title1: '提示，鼠标悬停的时候提示',
					msg: '<h3>Hello World!</h3>',
					dynamicStytle: '',
					cls:'',
					oneActive:true,
					twoActive:false,
					activeThree:true
				}
			})
		</script>



	</body>
</html>
